<!--车辆管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车辆维修 </span>
    <el-button @click="beforeAddRepair" type="primary" style="float:right;margin-top:13px;">录入维修车辆</el-button>
  </div>
  <!-- 新增车辆弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="送修人">
            <el-input placeholder="请输入" readonly :value="user.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修车辆">
            <el-select placeholder="请选择车牌号" v-model="saveRepairForm.vehicleId" @click="loadlicense">
<!--              <el-option v-for="item in leaderOptions" :label="item.username" :value="item.id" ></el-option>-->
              <el-option v-for="item in Repairlicense" :label="item.license" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修项目">
            <el-select placeholder="请选择" v-model="saveRepairForm.item">
              <el-option label="汽车保养" value="10"></el-option>
              <el-option label="汽车美容" value="20"></el-option>
              <el-option label="钣金喷漆" value="30"></el-option>
              <el-option label="四轮定位" value="40"></el-option>
              <el-option label="机修" value="50"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修地点">
            <el-select placeholder="请选择" v-model="saveRepairForm.addr">
              <el-option label="沃尔沃专修店" value="10"></el-option>
              <el-option label="美奥行汽修" value="20"></el-option>
              <el-option label="悦心金峰盛车检汽修" value="30"></el-option>
              <el-option label="京昌鑫顺汽修" value="40"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修材料">
            <el-select placeholder="请选择" v-model="saveRepairForm.material">
              <el-option label="汽缸垫进排气歧管垫" value="10"></el-option>
              <el-option label="发动机前后悬挂胶垫" value="20"></el-option>
              <el-option label="板簧胶套" value="30"></el-option>
              <el-option label="消声器" value="40"></el-option>
              <el-option label="气门弹簧" value="50"></el-option>
              <el-option label="气门" value="60"></el-option>
              <el-option label="止推垫" value="70"></el-option>
              <el-option label="大/小瓦" value="80"></el-option>
              <el-option label="四配套（缸套、活塞、活塞环、活塞销）" value="90"></el-option>
              <el-option label="轴承" value="100"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修费用">
            <el-input placeholder="请输入" v-model="saveRepairForm.fee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修时间" >
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="saveRepairForm.repairTime"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修状态">
            <el-radio-group v-model="saveRepairForm.status" >
              <el-radio  label="维修中" value="1" ></el-radio>
              <el-radio  label="已完成" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveRepair">保存</el-button>
    </template>
  </el-dialog>
  <!-- 车辆搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true" >
      <el-form-item label="维修车辆">
        <el-input placeholder="请输入车牌号" style="width:220px;" v-model="searchRepairForm.brand"  @keydown.enter="loadRepair" ></el-input>
      </el-form-item>
      <el-form-item label="送修人员" style="width:290px;">
        <el-input placeholder="请输入送修人员姓名" style="width:220px;" v-model="searchRepairForm.license"  @keydown.enter="loadRepair" ></el-input>
      </el-form-item>
      <el-form-item label="维修状态" style="width:290px;">
        <el-select placeholder="请选择" v-model="searchRepairForm.status" @change="loadRepair">
          <el-option label="维修中" value="1"></el-option>
          <el-option label="已完成" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadRepair">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 车辆列表 -->
  <el-card style="margin:20px;">
    <el-table :data="repairArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="license" label="维修车辆" align="center"/>
      <el-table-column prop="item" label="维修项目" align="center"/>
      <el-table-column prop="username" label="送修人员" align="center"/>
      <el-table-column prop="addr" label="维修地点"  align="center" />
      <el-table-column prop="repairTime" label="维修时间" align="center"/>
      <el-table-column prop="fee" label="维修费用" align="center"/>
      <el-table-column prop="material" label="维修材料" align="center"/>
      <el-table-column prop="status" label="维修状态" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editRepair(scope.row.id)" >编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteRepair(scope.row.id,scope.row.license)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const user =ref(getUser());
// 控制新增车辆弹窗是否显示
const dialogVisible = ref(false);
// 定义变量控制dialog的标题
const dialogTitle = ref('新增车辆');
// 定义一个对象,用来保存搜索条件
const searchRepairForm = ref({license: '',username: '',status: ''});
// 车辆列表显示数组
const repairArr = ref([]);
// 定义加载车辆维修列表的方法
const loadRepair = ()=>{
    let data = qs.stringify(searchRepairForm.value);
    axios.get(BASE_URL+'/v1/repair/select?'+data)
        .then((response)=>{
          if(response.data.code === 2000){
            repairArr.value = response.data.data;
          }else {
            ElMessage.error(response.data.msg);
          }
        })
}
// 首页进来加载全部车辆列表
onMounted(()=>{
  loadRepair();
})
// 定义重置按钮的方法,清空搜索条件,重新加载用户数据
const resetSearch = () => {
  searchRepairForm.value = {}
  loadRepair();
}
// 定义关闭弹窗的方法
const handleClose = () => {
  if (confirm('确定关闭吗?')){
    // 关闭弹窗并清空表单
    dialogVisible.value = false;
    // 清空表单
    saveRepairForm.value = {};
  }
}
// 定义保存车辆信息的对象,用来保存表单数据
const saveRepairForm = ref({
  userId: '',
  username: '',
  vehicleId: '',
  item: '',
  material: '',
  fee: '',
  addr: '',
  repairTime: '',
  status: '',
});
// 定义新建车辆的车牌号
const Repairlicense = ref([
  {license:'AA1111',id:'101'},
  {license:'BB2222',id:'102'},
])
// 定义显示车牌号的方法
const loadlicense = () => {
  axios.get(BASE_URL+'/v1/vehicle/select')
      .then((response)=>{
        if(response.data.code === 2000){
          Repairlicense.value = response.data.data;
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
// 定义保存车辆信息的方法
const saveRepair = () => {
  saveRepairForm.value.userId = user.value.id;
  saveRepairForm.value.username = user.value.username;
  //console.log(saveRepairForm.value)
  let data = qs.stringify(saveRepairForm.value);
  axios.post(BASE_URL+'/v1/repair/save',data)
      .then((response)=>{
        if(response.data.code === 2000){
          ElMessage.success('保存成功!');
          // 关闭弹窗
          dialogVisible.value = false;
          // 清空表单
          saveRepairForm.value = {};
          loadRepair();
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
// 定义编辑车辆信息的方法
const editRepair = (id) => {
    dialogTitle.value = '编辑车辆';
    dialogVisible.value = true;
    let data = qs.stringify({id: id});
    axios.get(BASE_URL + '/v1/repair/select?' + data)
        .then((response) => {
          if (response.data.code === 2000) {
            saveRepairForm.value = response.data.data[0];
          } else {
            ElMessage.error(response.data.msg);
          }
        })
}
// 定义把编辑车辆标题改为新建车辆的方法
const beforeAddRepair = () => {
  dialogTitle.value = '新建车辆';
  dialogVisible.value = true;
}
// 定义删除车辆的方法
const deleteRepair = (vehicleId,license) => {

}
</script>